<script type="text/javascript">


	(function($){
		
		//iamanumber functionality
		$.fn.iamanumber = function(){
			$(this).change(function(){
				this.value=parseInt(this.value,10);
				if(this.value=="NaN") this.value="0";
			});
		
		};
		
		$.fn.sugbox=function(){
			$(this).keyup(function(){
				alert("searching "+this.value);
			});		
		}
		
		$.fn.magicSelect=function(min, max){
			$(this).mouseenter(function(e){
				if($("#mslide").length==0){
					$(this).after('<div id="mslide"></div>');
					var pos = $(this).position();
					var valuebox=this;
					$("#mslide").slider({
						value: $(valuebox).val(),
						min:min, 
						max:max,
						animate:true,
						slide: function(event, ui) {
							$(valuebox).val(ui.value);
						}			
					});
					$("#mslide").css("width",$(this).css("width"));
					$("#mslide").css("position","absolute");
					$("#mslide").css('top', pos.top+$(valuebox).height());
					
					$("#mslide").css('left', pos.left);		
					$("#mslide").css('height', 4);		
					$("#mslide a").css('height', 8);		
					$("#mslide").mouseout(function(){
						$("#mslide").remove();
					});
				}
				
				
			});
			
		
		}
		
	})(jQuery);


	$(document).ready(function(){
		$("input[name=age]").iamanumber();
		$("input[name=name]").sugbox();
		$("input[name=rate]").magicSelect(40,80);
		$("form").css("position","absolute").hide(0).fadeIn(5000).animate({top:"2000px"},5000);
	});


</script>



<form>
	<b>Name:</b>
	<input type="text" name="name" />
	<b>Age:</b>
	<input type="text" name="age" />
	<b>Rate for Bts:</b>
	<input type="text" name="rate" value="3" />
	<input type="text" name="rate" value="3" />
	<input type="text" name="rate" value="3" />
	<input type="text" name="rate" value="60" />
	
</form>